<template>
  <el-dialog
    :modelValue="modelValue"
    @update:modelValue="updateModelValue"
    :title="title"
    width="40%"
  >
    <el-form
      ref="ruleFormEl"
      :model="ruleForm"
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
    >
      <el-form-item label="用户名" prop="username">
        <el-input v-model="ruleForm.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input show-password v-model="ruleForm.password"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="surePassword">
        <el-input show-password v-model="ruleForm.surePassword"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="canclelItem">取消</el-button>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { reactive, toRefs, ref } from "vue";
export default {
  props: {
    modelValue: Boolean,
    title: {
      type: String,
      default: "添加",
    },
    defaultValue: {
      type: Object,
      default: () => {
        return {
          username: "",
          password: "",
          surePassword: "",
        };
      },
    },
  },
  emits: ["submit"],
  setup(props, { emit }) {
    const validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (data.ruleForm.surePassword !== "") {
          ruleFormEl.value.validateField("surePassword");
        }
        callback();
      }
    };
    const validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请在次输入密码"));
      } else if (value !== data.ruleForm.password) {
        callback(new Error("与上次密码不符"));
      } else {
        callback();
      }
    };
    const data = reactive({
      ruleForm: {
        username: props.defaultValue.username,
        password: props.defaultValue.password,
        surePassword: props.defaultValue.surePassword,
      },
      rules: {
        username: [
          {
            required: true,
            message: "用户名不能为空",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "change",
          },
          { validator: validatePass, trigger: "change" },
        ],
        surePassword: [
          {
            required: true,
            message: "请在次输入密码",
            trigger: "change",
          },
          { validator: validatePass2, trigger: "change" },
        ],
      },
    });
    const ruleFormEl = ref(null);
    function disabledDateFc(item) {
      return new Date(item).getTime() < new Date().getTime();
    }
    function updateModelValue(item) {
      emit("update:modelValue", item);
    }
    function canclelItem() {
      ruleFormEl.value.resetFields();
      updateModelValue(false);
    }
    function submitForm() {
      ruleFormEl.value.validate((valid) => {
        if (valid) {
          emit("submit", {
            item: data.ruleForm,
            clear: ruleFormEl.value.resetFields,
          });
        } else {
          return false;
        }
      });
    }
    return {
      ...toRefs(data),
      ruleFormEl,
      updateModelValue,
      canclelItem,
      submitForm,
      disabledDateFc,
    };
  },
};
</script>

<style lang="scss" scoped></style>
